<template>
    <div>
        <quill-editor :options="editorOption" v-model="content">
        </quill-editor>
    </div>
</template>

<script>
    import {quillEditor} from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import quillConfig from "@/common/quill-config" //对当前这个富文本编辑器的配置。主要配置的就是编辑器中的按钮功能

    export default {
        //申明组件
        components: {
            quillEditor//quillEditor:quillEditor
        },
        data() {
            return {
                content: "",
                editorOption: quillConfig
            }
        },
        watch: { //监听content变量值的变化
            content(newVal,oldVal ) {
                console.log("newVal====" + newVal)
            }
        }

    }
</script>
<style>
    .quill-editor{
        height:300px;
    }
</style>